<template>
  <div class="">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="">
                <el-select class="w270"  v-model="selected" @change="getRows()">
                 <el-option key="全部新闻" label="全部新闻" :value="0"></el-option>
                   <el-option
                      v-for="item in selectData"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="">
                <el-button   @click="add" class="w150" type="success">添加新闻</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tableData" border style="width: 100%" header-row-class-name="bgd8">
                    
                    <el-table-column label="序号" type="index" > </el-table-column>
                    <el-table-column prop="title" label="新闻标题" :show-overflow-tooltip="true"> </el-table-column>
                    <el-table-column prop="titleEn" label="英文新闻标题" :show-overflow-tooltip="true"> </el-table-column>
                    <el-table-column prop="subtitle" label="新闻副标题" :show-overflow-tooltip="true"> </el-table-column>
                    <el-table-column prop="subtitleEn" label="英文新闻副标题" :show-overflow-tooltip="true"> </el-table-column>
                    <el-table-column label="英文新闻内容" :show-overflow-tooltip="true"> 
                      <template slot-scope="scope">
                          <p v-html="scope.row.content"></p>
                      </template>
                    </el-table-column>
                    <el-table-column prop="contentEn" label="新闻内容" :show-overflow-tooltip="true"> </el-table-column>
                    <el-table-column prop="typeName" label="新闻分类" > </el-table-column>
                    <el-table-column prop="createTime" label="发布日期"> 
                        <template slot-scope="scope">
                               <span>{{scope.row.createTime|formatDate}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作 " width="150px">
                        <template slot-scope="scope">
                            <el-button type="info" size="small"  @click="edit(scope.row)">编辑</el-button>
                            <el-button type="danger" size="small"  @click="del(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination background  layout="prev, pager, next" :total="totalCount" @current-change="currentChange" @prev-click="prevClick" @next-click="nextClick"> </el-pagination>

  </div>
</template>

<script>
// import ueditor from './ue.vue' //调用编辑器
export default {
  name: 'HelloWorld',
  data () {
    return {
      tableData: [{}],
      selected:'',
      selectData:[],
      formInline:{},
      curPage:1,
      totalCount:0,
    }
  },
  filters:{
    formatDate(date){
      date=new Date(date);
      var year=date.getFullYear();
      var month=date.getMonth()+1;
      var day=date.getDate();
      if(month<10){
        month='0'+month;
      }
      return year+'-'+month+'-'+day;
    }
  },
  methods:{
      add(){
          this.$router.push({path:'/home/newsType'})
      },
      edit(row){
          this.$router.push({path:'/home/newsType',query: {id:row.id}})
      },
      del(data){
        this.$confirm('确定要删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var id =data.id;
          var httpApi=this.$store.state.httpApi;
          this.$http.post(this.$store.state.httpApi + 'blNews/del?id='+id).then(response =>{
            if(response.status == 200){
              this.$message.success('删除成功');
					    this.getRows();
            }else{
              console.log('接口返回失败!',response);
            }
          },response => {
            
            console.log('请求失败',response)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      currentChange(page){
          this.curPage = page;
          this.getRows();
      },
      //上一页
      prevClick(page){
          this.curPage = page;
          this.getRows();
      },
    //  下一页
      nextClick(page){
          this.curPage = page;
          this.getRows();
      },
       getRows(){
          this.$http.get(this.$store.state.httpApi + 'blNews/page?currentPage='+this.curPage+'&pageNumber='+10+'&type='+this.selected).then(response =>{
          if(response.status == 200){
          this.tableData=response.data.data.pp;
          this.totalCount = response.data.data.page.totalPage*10;
          }else{
            console.log('接口返回失败!',response);
          }
          },response => {
            console.log('请求失败',response)
          })
       },
       getRowsOfType(){
          this.$http.get(this.$store.state.httpApi + 'newsType/all').then(response =>{
          if(response.status == 200){
          this.selectData=response.data.data;
          console.log(this.selectData);
          }else{
            console.log('接口返回失败!',response);
          }
          },response => {
            console.log('请求失败',response)
          })
       }
  },
   created(){
    this.getRows();
    this.getRowsOfType();
  },
  computed: {
    
  },
  components: {
//使用编辑器
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
    .img{
        height:513px;
        width:917px;
        display:block;
        margin-bottom:20px;
    }
</style>
